<template>
  <div>
    <a-table
      :locale="{emptyText:'暂无数据'}"
      :columns="columns" :data-source="dataList" size="small"
      :scroll="{ x: 1300 }">
      <template #name="{ record }">
        <a @click="toUpdatePage(record.id)">{{ record.name }}</a>
      </template>
      <template #action="{ record }">
      <span>
        <a @click="toUpdatePage(record.id)">修改</a>
        <a-divider type="vertical"/>
        <a-popconfirm
          title="确定要删除吗?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="toDelete(record.id)"
        >
          <a>删除</a>
        </a-popconfirm>
      </span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { ResultModel } from '@/common/result.model'
import { message } from 'ant-design-vue'
import { DeviceApi } from '@/views/device/js/device-api'
import { DeviceModel } from '@/views/device/js/device-model'

const columns = [
  {
    fixed: 'left',
    title: '设备名称',
    dataIndex: 'name',
    ellipsis: true,
    key: 'name',
    slots: { title: 'customTitle', customRender: 'name' }
  },
  {
    width: 150,
    title: '设备编号',
    dataIndex: 'code',
    ellipsis: true,
    key: 'code'
  },
  {
    width: 150,
    title: '所属班组',
    dataIndex: 'teamName',
    ellipsis: true,
    key: 'teamName'
  },
  {
    width: 180,
    title: '工作场所',
    key: 'workspace',
    dataIndex: 'workspace',
    ellipsis: true,
    slots: { customRender: 'workspace' }
  },
  {
    title: '电气安全措施',
    key: 'safetyMeasures',
    ellipsis: true,
    dataIndex: 'safetyMeasures'
  },
  {
    fixed: 'right',
    width: 120,
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' }
  }
]
export default defineComponent({
  name: 'device-table',
  components: {
  },
  data () {
    return {
      name: null
    }
  },
  methods: {
    gotoAddPage () {
      this.$router.push('/device/device/form')
    }
  },
  setup () {
    const instance = getCurrentInstance()
    const dataList = ref([])
    const pageQuery = (name = null) => {
      DeviceApi.query(1, 10, name).then(response => {
        console.log(response)
        if (ResultModel.isSuccessPageInfo(response)) {
          // eslint-disable-next-line no-return-assign
          response.data && response.data.dataList && response.data.dataList.forEach((item: DeviceModel) => item.key = item.id)
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          dataList.value = response.data.dataList
        }
      })
    }
    pageQuery()
    const toDelete = (id: string) => {
      DeviceApi.delete(id).then(response => {
        if (ResultModel.isSuccess(response)) {
          message.success({ content: '删除成功！' })
          pageQuery()
        } else {
          message.error({ content: '删除失败！' })
        }
      })
    }
    const toUpdatePage = (id: string) => {
      if (instance && instance.proxy && instance.proxy.$root && instance.proxy.$root.$router) {
        instance.proxy.$root.$router.push('/device/device/form/' + id)
      }
    }
    const toDetailPage = (id: string) => {
      if (instance && instance.proxy && instance.proxy.$root && instance.proxy.$root.$router) {
        instance.proxy.$root.$router.push('/device/device/form/' + id)
      }
    }
    return {
      pageQuery,
      toDelete,
      toUpdatePage,
      toDetailPage,
      dataList,
      columns
    }
  }
})
</script>

<style scoped lang="less">

</style>
